<template>
  <div class="van-select">
    <!-- 下拉框 -->
    <van-field
      readonly
      :name="name"
      :rules="rules"
      :required="required"
      :input-align="inputAlign"
      :placeholder="`请选择${label}`"
      :value="bindName"
      :label="label"
      :right-icon="!show ? 'arrow-down' : 'arrow-up'"
      @click="onPicker()"
    />
    <!-- :right-icon="!show?'arrow-down': 'arrow-up' " -->
    <!-- 下拉框组件 -->
    <van-popup v-model="show" round position="bottom" get-container="#app">
      <van-field
        v-if="filterable"
        v-model="keyWord"
        placeholder="输入关键字进行过滤"
      />
      <van-picker
        show-toolbar
        :title="label"
        :value-key="prop"
        :columns="filterOptions"
        @confirm="onConfirm"
        @cancel="show = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "VanSelect",
  props: {
    name: {
      type: String,
      default: "picker",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    },
    label: {
      type: [String],
      default: "",
    },
    prop: {
      type: [String],
      default: "label",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    rules: {
      type: Array,
      default: () => {
        return [{ required: false, message: " " }];
      },
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    inputAlign: {
      type: String,
      default: "right",
    },
    filterable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      bindValue: "",
      bindName: "",
      show: false,
      keyWord: "",
      filterOptions: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        this.bindValue = val;
        if (!val) {
          this.bindName = "";
        } else {
          const option = this.options.find((item) => {
            return item.value === val;
          });
          if (option) this.bindName = option[this.prop];
        }
      },
      immediate: true,
    },
    keyWord: {
      handler(val) {
        if (val) {
          this.filterNode();
        } else {
          this.filterOptions = this.options;
        }
      },
    },
    options: {
      handler(val) {
        this.filterOptions = val;
      },
      immediate: true,
    },
  },
  methods: {
    // 下拉框选择
    onPicker() {
      this.keyWord = "";
      if (this.disabled) return;
      this.show = true;
    },
    filterNode() {
      this.filterOptions = this.options.filter(
        (v) => v.label.indexOf(this.keyWord) !== -1
      );
    },
    onConfirm(value) {
      console.log(value);
      if (!value) return (this.show = false);
      this.bindValue = value.value;
      this.bindName = value[this.prop];
      this.$emit("input", this.bindValue);
      this.$emit("change", this.bindValue);
      this.show = false;
    },
  },
};
</script>
<style scoped>
.van-select {
  position: relative;
}
.van-select::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
